<template>
  <c-card>
    <el-form :model="form" inline>
      <el-form-item label="交易所">
        <el-select
            v-model="form.exchangeId"
            placeholder="请选择"
            style="width: 200px;"
            @change="getPageList"
        >
          <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
<!--        <el-button type="primary" @click="addHandle" @ok="getPageList">新增</el-button>-->
        <el-button type="success" @click.stop="detailHandle">多图</el-button>
      </el-form-item>
      <el-form-item label="自动刷新：">
        <el-checkbox v-model="isAuto"  />
      </el-form-item>
    </el-form>
  </c-card>
<c-card>

  <el-table @row-click="rowHandle" :data="tableData" @selectionChange="selectionChange" stripe highlight-current-row>
    <el-table-column type="selection" width="50" />
    <el-table-column prop="code" label="代码" width="120"/>
    <el-table-column prop="name" label="名称"/>
    <el-table-column prop="price" label="最新价">
      <template #default="{row}">
        <el-text :type="getColorName(row.ratio)">{{row.price}}</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="ratio" label="涨跌比">
      <template #default="{row}">
        <el-text :type="getColorName(row.ratio)">{{row.ratio}}%</el-text>
      </template>
    </el-table-column>
<!--    <el-table-column prop="transactionsMultiplier" label="交易乘数"/>-->
<!--    <el-table-column prop="marginRate" label="保证金率"/>-->
<!--    <el-table-column prop="commissionType" label="手续费类型">-->
<!--      <template #default="{row}">-->
<!--        {{row.commissionType === 1 ? '固定' : '百分比'}}-->
<!--      </template>-->
<!--    </el-table-column>-->
<!--    <el-table-column prop="commission" label="手续费"/>-->
    <el-table-column prop="sort" label="排序"/>
    <el-table-column prop="exchangeName" label="交易所"/>
    <el-table-column prop="ratio" label="上涨价">
      <template #default="{row}">
        <el-text :type="getPriceColorName(row.price - row.upPrice, 'up')">{{row.upPrice}}</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="ratio" label="下跌价">
      <template #default="{row}">
        <el-text :type="getPriceColorName(row.price - row.downPrice, 'down')">{{row.downPrice}}</el-text>
      </template>
    </el-table-column>
    <el-table-column width="120" label="操作">
      <template #default="{row}">
        <el-button link type="danger" @click.stop="delHandle(row)">
          删除
        </el-button>
        <el-button link type="primary" @click.stop="updateHandle(row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</c-card>

  <add-update ref="addUpdateRef" @ok="getPageList"></add-update>
</template>

<script setup>
import {onMounted, onUnmounted, reactive, ref} from "vue";
import CCard from "../../../c-components/c-card.vue";
import {DEL, GET} from "../../../api/index.js";
import AddUpdate from "./add-update.vue";
import {getColorName, getPriceColorName, messageBox, notify, timeRefresh} from "../../../utils/commonScript.js";
import {Bottom, Top} from "@element-plus/icons-vue";

const tableData = ref([])
const addUpdateRef = ref(null)
const codes = ref([])
const names = ref([])
const form = reactive({
  exchangeId: '',
  sort: 2
})
const options = ref([])
const timer = ref(null)
const isAuto = ref(false)

const getList = () => {
  GET("/futures/exchange/list").then(res => {
    options.value = res.data
  }).catch(() => {
  })
}
getList()

const delHandle = (row) => {
  messageBox.confirm(
      `确定要删除 【${row.name}】?`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        DEL('/futures/variety', [row.id]).then(res => {
          notify('删除成功')
          getPageList()
        })
      })
      .catch(() => {

      })


}

// 获取所有股票信息
const getPageList = () => {
  GET("/futures/variety/list", {
    orderField: 'sort',
    order: 'desc',
    exchangeId: form.exchangeId,
    // sort: form.sort
  }).then(res => {
    tableData.value = res.data
  }).catch(() => {
  })
}

onMounted(() => {
  getPageList()
  timer.value = setInterval(() => {
    if(isAuto.value) {
      getPageList()
    }
  }, 5000)
})

onUnmounted(() => {
  clearInterval(timer.value)
})

const addHandle = () => {
  addUpdateRef.value.open()
}
const updateHandle = (row) => {
  addUpdateRef.value.open(row)
}

const selectionChange = (rows) => {
  codes.value = rows.map(item => item.code)
  names.value = rows.map(item => item.name)
}
const detailHandle = () => {
  rowHandle({
    code: codes.value.join(','),
    name: names.value.join(',')
  })
}
const rowHandle = (row) => {
  window.open(`/#/stock-detail?stockCode=${row.code}&stockName=${row.name}&type=1`)
}
</script>

<style lang="scss" scoped>
</style>
